<template>
  <div class="container mx-auto px-4 py-6">
    <el-table 
      :data="tableData" 
      class="w-full border"
      :header-cell-style="tableHeaderColor"
      border
    >
      <el-table-column 
        prop="realName" 
        label="姓名" 
        width="180" 
        align="center" 
      />
      <el-table-column 
        prop="item" 
        label="农作物" 
        width="180" 
        align="center" 
      />
      <el-table-column 
        prop="phone" 
        label="联系方式" 
        width="180" 
        align="center"
      />
      <el-table-column 
        prop="area" 
        label="种植面积(亩)" 
        width="180" 
        align="center"
      />
      <el-table-column 
        prop="amount" 
        label="金额(元)" 
        width="180" 
        align="center"
      />
      <el-table-column 
        prop="address" 
        label="地址" 
        align="center" 
      />
    </el-table>
    
  <div class="flex justify-center items-center mt-8 text-sm">
    <Pagination
      :current-page="pagination.currentPage"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      @update:current-page="setCurrentPage"
      @update:page-size="setPageSize"
      @page-change="loadData"
      class="mt-6"
    />
  </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { apiClient } from "../api/apiService.js";
import { useRouter } from "vue-router";
import { ElMessage } from 'element-plus';
import { useStore } from "vuex";
import Pagination from "../components/Pagination.vue";

const tableHeaderColor = () => {
  return {
    'background-color': '#F5F5F5',
    'color': '#333',
    'font-weight': '400',
    'font-size': '16px',
    'text-align': 'center'
  }
}

// 分页状态
const pagination = ref({
  currentPage: 1,
  pageSize: 28,
  total: 0,
});

// 表格数据
const tableData = ref([]);

// 后端请求数据数据
const selectData = async ({ page }) => {
  try {
    //检索URL
    const url=ref(`/finance/selectRecommend/${page}`);
    const response = await apiClient.get(url.value, {
      headers: {
        Authorization: window.localStorage.token,
      },
    });
    if (response.flag) {
      return response.data;
    } else {
      ElMessage.error(response.data);
    }
  } catch (error) {
    console.error("请求失败", error);
    throw error;
  }
};

// 加载数据
const loadData = async ({ page }) => {
  try {
    const res = await selectData({ page });
    tableData.value = res.list;
    pagination.value.total = res.total;
  } catch (error) {
    console.error("数据加载失败:", error);
  }
};

// 更新当前页
const setCurrentPage = (page) => {
  pagination.value.currentPage = page;
};

// 更新每页条数
const setPageSize = (size) => {
  pagination.value.pageSize = size;
};

// 初始化加载
onMounted(() => {
  loadData({
    page: pagination.value.currentPage,
  });
});
</script>

<style>
/* 保留Element Plus必要的样式覆盖 */
.el-header {
  @apply bg-gray-200 text-gray-800;
  line-height: 60px;
}

.el-aside {
  @apply text-gray-800;
}

/* 表格样式增强 */
.el-table {
  @apply shadow-sm;
}

.el-table th {
  @apply font-medium;
}

.el-table td {
  @apply py-3;
}
</style>